<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>11.axjios+vue</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点击获取" @click="btnpost">
			<p>{{mess}}</p>
		</div>
		<script src="./jquery-3.6.1.js"></script>
		<script src="./vue-v2.7.13.js"></script>
		<script>
			var app = new Vue({
				el: "#app", //Id #id class .name  标签 div
				data: {
					mess: ""
				},
				//对象 方法
				methods: {
					btnpost: function() {
						var that = this
						$.ajax({
							url: "https://autumnfish.cn/api/joke",
							type: 'GET', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								that.mess = data
							},
							error: function(xhr, type, errorThrown) {

							}
						});
					}
				}
			})
		</script>

	</body>

</html>
